<template>
  <div :class="[Wwidth > 800 ? 'login-container ' : 'login-container-phone']">
    <div>
      <h3 class="title">共享锁管理后台</h3>
      <el-form ref="formRef" :model="form" class="login-form" :rules="rules">
        <div class="title-container"></div>
        <el-form-item prop="staffid">
          <svg-icon icon="user" class="svg-container"></svg-icon>
          <el-input v-model="form.staffid"></el-input>
        </el-form-item>
        <el-form-item prop="passwords">
          <svg-icon icon="password" class="svg-container"></svg-icon>
          <el-input v-model="form.passwords" :type="passwordType"></el-input>
          <svg-icon
            :icon="passwordType === 'password' ? 'eye' : 'eye-open'"
            @click="changeType"
          ></svg-icon>
        </el-form-item>
        <div class="login-button">
          <el-image class="login-image" :src="img" v-on:click="wxHandleLogin" />

          <el-button type="primary" class="button-style" @click="handleLogin"
            >登录</el-button
          >
        </div>
      </el-form>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="微信扫码登录"
      width="40%"
      center="true"
      :before-close="handleClose"
    >
      <div style="text-align: center">
        <el-image class="qr-iamge" :src="QrCodeurl" fit="scale-down" />
        <div style="text-align: center">
          <el-button type="primary" @click="getOpenId">微信登录</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-model="dialogVisible2"
      title="请绑定账号"
      center="true"
      width="40%"
    >
      <el-form :model="bindform">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="bindform.staffid" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            v-model="bindform.passwords"
            autocomplete="off"
            style="margin-left: 12px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="bindUser">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import {
  QrCodeLogin,
  getOpenIdApi,
  loginJudge,
  getPublickey
} from '@/api/login'
import { UserFind, UserUpdateById } from '@/api/staff'
import { ElMessage } from 'element-plus'
import SvgIcon from '../../components/SvgIcon/index.vue'
import img from '@/assets/images/QrCode.svg'
import JSEncrypt from 'jsencrypt'
// import '@/styles/login.scss'
const store = useStore()
const form = ref({
  staffid: '1',
  passwords: 'admin'
  //   staffid: '2',
  // passwords: '432'
})
const bindform = ref({
  id: '',
  openidw: '',
  staffid: '',
  passwords: ''
})
const rules = ref({
  telephone: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'blur'
    }
  ],
  passwords: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'blur'
    }
  ]
})
const publickey = ref('')
const sceneStr = ref('')
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const QrCodeurl = ref('')
const openId = ref('')
const Wwidth = ref()
const Wheight = ref()
const pwdJm = async () => {
  const res = await getPublickey()
  publickey.value = res
}
pwdJm()
const formRef = ref(null)
const handleLogin = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      var encrypt = new JSEncrypt()
      encrypt.setPublicKey(publickey.value)
      var encodeData = encrypt.encrypt(form.value.passwords)
      form.value.passwords = encodeData
      store.dispatch('app/login', form.value)
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
const wxHandleLogin = async () => {
  dialogVisible.value = true
  const res = await QrCodeLogin()
  sceneStr.value = res.data.sceneStr
  QrCodeurl.value =
    'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + res.data.ticket
}
const getwindow = () => {
  Wwidth.value = document.documentElement.clientWidth
  Wheight.value = document.documentElement.clientHeight
}
getwindow()
const getOpenId = async () => {
  console.log(sceneStr.value)
  const res = await getOpenIdApi(sceneStr.value)
  openId.value = res.data.openId
  if (res.data.openId) {
    ElMessage({
      message: '扫码成功',
      type: 'success'
    })
    judgeL()
  }
}
const judgeL = async () => {
  const res = await loginJudge(openId.value)
  if (res.staff.staffid !== 0) {
    form.value.staffid = res.staff.staffid
    form.value.passwords = res.staff.passwords
    handleLogin()
    dialogVisible.value = false
  } else {
    dialogVisible.value = false
    dialogVisible2.value = true
  }
}
const bindUser = async () => {
  const res = await UserFind(bindform.value)
  if (res.staffid !== 0) {
    bindform.value.staffid = res.staffid
    bindform.value.openidw = openId.value
    var encrypt = new JSEncrypt()
    encrypt.setPublicKey(publickey.value)
    var encodeData = encrypt.encrypt(form.value.passwords)
    bindform.value.passwords = encodeData
    UserUpdateById(bindform.value)
    ElMessage({
      message: '绑定成功',
      type: 'success'
    })
    form.value.staffid = res.staffid
    form.value.passwords = res.passwords
    handleLogin()
  } else {
    ElMessage.error('账户名或密码错误')
  }
}
const passwordType = ref('password')
const changeType = () => {
  if (passwordType.value === 'password') {
    passwordType.value = 'text'
  } else {
    passwordType.value = 'password'
  }
}
</script>
<style lang="scss" scoped></style>
